<script setup>
import { defineComponent, onMounted, ref, watch } from 'vue';
import { uploadFile } from '@/api/uploadFile'
import uploadImagePreview from './UploadIMagePreview.vue'

const props = defineProps({
  fileList: Array,
  prop: String,
  refName: String,
  trigger: Object, // 插槽 ==> 非必传
  tip: Object, // 插槽 ==> 非必传
  api: Function, // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里handleHttpUpload方法内直接引入即可 ==> 非必传
  drag: {
    type: Boolean,
    default: true
  }, // 是否支持拖拽上传
  disabled: Boolean
})

const fileList = ref(props.fileList)
watch(() => props.fileList, newVal => {
  fileList.value = newVal
})

const emit = defineEmits(['getRef', 'updata:fileList'])
emit('updata:fileList', fileList) // 传递给父组件

const inputRef = ref(null)
const name =  props.refName || `${props.prop}Ref`
onMounted(() => {
  emit('getRef', { name, value: inputRef.value })
})

const trigger = defineComponent(props.trigger)
const tip = defineComponent(props.tip)

/**
 * @description 图片上传
 * @param options 上传的文件
 * */
const handleHttpUpload = async (options) => {
  const formData = new FormData()
  formData.append('file', options.file)
  try {
    const api = props.api ?? uploadFile
    const data = await api(formData)
    options.onSuccess(data)
  }
  catch (error) {
    options.onError(error)
  }
}

const onSuccess = (response, file, fileList) => {
  if(!response){ return }
  file.name = response.response.fileName
  file.url = response.response.filePath
  console.log(fileList);
}
</script>

<template>
  <div class="upload-warp">
    <el-upload 
      class="upload-cont"
      action="#" 
      :file-list="fileList" 
      :http-request="handleHttpUpload" 
      :drag="drag"
      :disabled="disabled"
      :show-file-list="false"
      v-bind="$attrs"
      :on-success="onSuccess">
      <template #trigger>
        <template v-if="trigger">
          <trigger />
        </template>
        <template v-else>
          <div class="upload-area" :style="{ borderWidth: drag && '0' }" :class="[disabled && 'is-disabled']">
            <i class="el-icon-plus"></i>
            上传图片
          </div>
        </template>
      </template>
      <template #tip>
        <tip />
      </template>
    </el-upload>
    <uploadImagePreview 
      v-for="img in fileList"
      :key="img.name"
      :src="img.url"
    />
    <!-- <el-image
      v-for="img in fileList"
      :key="img.name"
      :src="img.url"
      :preview-src-list="fileList.map(item => item.url)"></el-image> -->
  </div>
</template>

<style lang="scss" scoped>
.upload-area{
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #ccc;
  border: 1px dashed #d9d9d9;
  >i{
    font-size: 30px;
  }
}
.upload-area:hover{
  color: #66b1ff;
  border-color: #66b1ff;
}

:deep(.el-upload-dragger){
  width: 150px;
  height: 150px;
}

.is-disabled:hover{
  cursor: no-drop;
  color: #ccc;
  border-color: #d9d9d9;
}

:deep(.el-image){
  width: 150px;
  height: 150px;
}

.upload-cont{
  display: inline-block;
  margin-right: $margin;
}
</style>
